<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
  <div class="w-full mx-auto">
    <div class="block lg:grid lg:grid-cols-2 lg:gap-1">
      <a-card
        style="height:  68px;"
        class="rounded-sm mt-3"
        :body-style="{ padding: 0, height: '65px' }"
        :bordered="false"
        hoverable
      >
        <div class="flex justify-between h-full">
          <div class="en-title bg-blue-600">DW</div>
          <div class="w-full ml-3.5 flex justify-between items-center">
            设备统计
            <a-space size="large" class="mr-3">
              <div class="text-right">
                <div>总数</div>
                <div style="font-size:14px;font-weight:700;color:goldenrod;">12</div>
              </div>
              <div class="text-right">
                <div>新增</div>
                <div><icon-caret-up class="text-green-600" /> 0</div>
              </div>
            </a-space>
          </div>
        </div>
      </a-card>
      <a-card
        style="height: 68px;"
        class="rounded-sm mt-3 lg:ml-2"
        :body-style="{ padding: 0, height: '65px' }"
        :bordered="false"
        hoverable
      >
        <div class="flex justify-between h-full">
          <div class="en-title bg-red-600">SB</div>
          <div class="w-full ml-3.5 flex justify-between items-center">
            设备统计
            <a-space size="large" class="mr-3">
              <div class="text-right">
                <div>总数</div>
                <div style="font-size:14px;font-weight:700;color:green;"> 33 </div>
              </div>
              <div class="text-right">
                <div>新增</div>
                <div><icon-caret-down class="text-red-600" /> 0</div>
              </div>
            </a-space>
          </div>
        </div>
      </a-card>
      <!-- <a-card
        style="height:  68px;"
        class="rounded-sm mt-3 lg:ml-2"
        :body-style="{ padding: 0, height: '65px'}"
        :bordered="false"
        hoverable
      >
        <div class="flex justify-between h-full">
          <div class="en-title bg-pink-600">DB</div>
          <div class="w-full ml-3.5 flex justify-between items-center">
            设备统计
            <a-space size="large" class="mr-3">
              <div class="text-right">
                <div>总数</div>
                <div style="font-size:14px;font-weight:700;color:red;"> 1</div>
              </div>
              <div class="text-right">
                <div>新增</div>
                <div><icon-caret-down class="text-red-600" /> 0</div>
              </div>
            </a-space>
          </div>
        </div>
      </a-card> -->
  
    </div>
    <div class="block lg:grid lg:grid-cols-2 lg:gap-1">
      <a-card
        style="height:  68px;"
        class="rounded-sm mt-3"
        :body-style="{ padding: 0, height: '65px' }"
        :bordered="false"
        hoverable
      >
        <div class="flex justify-between h-full">
          <div class="en-title bg-blue-600">SY</div>
          <div class="w-full ml-3.5 flex justify-between items-center">
            设备统计
            <a-space size="large" class="mr-3">
              <div class="text-right">
                <div>总数</div>
                <div style="font-size:14px;font-weight:700;color:red;">1</div>
              </div>
              <div class="text-right">
                <div>新增</div>
                <div><icon-caret-up class="text-green-600" /> 0</div>
              </div>
            </a-space>
          </div>
        </div>
      </a-card>
      <a-card
        style="height: 68px;"
        class="rounded-sm mt-3 lg:ml-2"
        :body-style="{ padding: 0, height: '65px' }"
        :bordered="false"
        hoverable
      >
        <div class="flex justify-between h-full">
          <div class="en-title bg-red-600">MY</div>
          <div class="w-full ml-3.5 flex justify-between items-center">
            设备数量
            <a-space size="large" class="mr-3">
              <div class="text-right">
                <div>总数</div>
                <div style="font-size:14px;font-weight:700;color:red;">1</div>
              </div>
              <div class="text-right">
                <div>新增</div>
                <div><icon-caret-down class="text-red-600" /> 0</div>
              </div>
            </a-space>
          </div>
        </div>
      </a-card>
      <!-- <a-card
        style="height:  68px;"
        class="rounded-sm mt-3 lg:ml-2"
        :body-style="{ padding: 0, height: '65px'}"
        :bordered="false"
        hoverable
      >
        <div class="flex justify-between h-full">
          <div class="en-title bg-pink-600">WX</div>
          <div class="w-full ml-3.5 flex justify-between items-center">
            设备数量
            <a-space size="large" class="mr-3">
              <div class="text-right">
                <div>总数</div>
                <div style="font-size:14px;font-weight:700;color:red;"> 1 </div>
              </div>
              <div class="text-right">
                <div>新增</div>
                <div><icon-caret-down class="text-red-600" /> 0</div>
              </div>
            </a-space>
          </div>
        </div>
      </a-card> -->
  
    </div>
  </div>
</template>

<style scoped>
.en-title {
  width: 75px; color: #fff; text-align: center;
  line-height: 65px; font-weight: bold; font-size: 1.3em;

  border-radius: 2px 0 0 2px;
}
</style>
<script setup>
import { ref, reactive ,onMounted} from 'vue'

import { Message } from '@arco-design/web-vue'
import tool from '@/utils/tool'
import * as common from '@/utils/common'


const statData = ref([])
const props = defineProps(['proid'])

console.log(props.proid)
onMounted(async() => {
  // const response = await enterpriseCommon.getProductionStar({production_id:props.proid,business_id:tool.local.get('business')})
  // console.log(response)
  // if (response.success) {
  //   // Message.success(response.message)
  //   statData.value = response.data
  // }

})



</script>